<template>
	<div style="background: #f5f5f5;">
		<vhead></vhead>
		<div class="container" style="margin-top: 50px;">
			<div class="row">
				<div class="col-sm-9 col-xs-12">
					<ol class="breadcrumb">
					      	<li>
					      		<router-link to="/home">首页</router-link>
					      	</li> 
					      	<li>
					      		<router-link to="/resouse">站长作品</router-link>
					      	</li> 
					      	<li class="active">『{{resouseJson.resouseName}}』</li>
				    </ol>
					<div class="col-sm-3 hidden-xs">
						<img class="col-sm-12" :src="resouseJson.resouseUrl"/>
					</div>
					<div class="col-sm-9 col-xs-12">
						<ul class="list-unstyled listFilm">
							<li>名称：{{resouseJson.resouseName}}</li>
							<li>页数：{{resouseJson.resousePage}}</li>
							<li>类别：{{resouseJson.name}}</li>
							<!--<li>前端技术：{{resouseJson.bookPulishHouse}}</li>
							<li>后台技术：{{resouseJson.bookPulishDate}}</li>-->
						</ul>
					</div>
					<div class="col-sm-12 col-xs-12">
						<h4>『{{resouseJson.resouseName}}』 作品图片</h4>
					</div>
					<div class="col-sm-12  col-xs-12">
						<img class="col-sm-12  col-xs-12" v-for="item in resouseImg" :src="item.resouse_imgs">
					</div>
				</div>
			</div>
		</div>
		<vfoot></vfoot>
	</div>
</template>

<script>
	import Vhead from "../public/VHead"
	import VFoot from "../public/VFoot"
	import Qs from 'qs'
	export default {
		data () {
		    return {
		    	resouseJson : [],
		    	resouseImg : []
		    }
		},
		mounted ($route) {
	 		this.$nextTick(()=>{
	 			let _this = this;
	 			
	 			//获取作品的ID
	 			let resouseId = {
  					"resouseId":_this.$route.params.id,
  				}
	 			
	 			//获取指定的作品
	 			_this.$axios({
	  				method:"post",
	  				data:Qs.stringify(resouseId),
	  				url:"../public/index.php/index/Resouse/findResouseById",
	  			}).then(function(result){
	  				result.data[0]["resouseUrl"] = '../public/uploads/'+result.data[0]["resouseUrl"] ;
					_this.resouseJson = result.data[0];
	  			});
	  			
	  			//获取作品的图片
	  			_this.$axios({
	  				method:"post",
	  				data:Qs.stringify(resouseId),
	  				url:"../public/index.php/index/Resouse/findResouseImgById",
	  			}).then(function(result){
	  				for(var i = 0;i<result.data.length;i++){
  						result.data[i]["resouse_imgs"] = '../public/uploads/'+result.data[i]["resouse_imgs"] ;
  					}
					_this.resouseImg = result.data;
	  			});
	  			
	 		})
 		},
		components:{
			"vhead" : Vhead,
			"vfoot" : VFoot,
		},
		methods : {
			
		}
	}
</script>

<style scoped>
	
	.listFilm li{
		line-height: 30px;
	}
	.film-like img{
		width: 100%;
	}
	.film-comment{
	}
	.film-comment li{
		padding: 5px 0px;
		border-bottom: 1px solid #dfdfdf;
	}
	.save-comment{
		background: #fae9da;
	    height: 30px;
		text-align: center;
		line-height: 30px;
		color: #C65E24;
		cursor: pointer;
	}
	
</style>